SVG 輸出注意事項

2019 iT 邦幫忙鐵人賽

DAY 16

Modern Web

前端「設計」聖光之路系列第 16 篇

2019鐵人賽網頁設計 svg

卡斯伯

2018-10-30 10:44:36

11700 瀏覽

分享至

向量工具、Adobe XD、Sketch 也都能夠輸出 SVG 圖片，但在輸出時有些小地方也需要注意一下，避免在本地端看似沒有問題，但用戶卻看到的卻與預期不同。

首先瞭解一下 SVG 本身其實是 XML 格式的檔案，這是一個類似 HTML 格式的結構標記，如果要繪製一個方形，則會使用 <rect> 的標籤，並定義他的座標、尺寸、填色樣式等等。

<!-- SVG tag -->
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="120">
	<!-- 矩行 tag -->
	<rect x="2" y="2" width="100" height="100" style="stroke: #333; stroke-width: 3; fill: MediumTurquoise;"/>
</svg>

接下來就會出現如下的矩形。

SVG 一些常見的圖形原始碼可以參考。所以 SVG 輸出後與其它的圖片有很大的不同，他依然是透過一些文字標記組成，再有了基本了解後，我們再透過這些觀念了解輸出的圖片為什麼可能出錯，以及怎麽從輸出後的原始碼發現錯誤。

文字務必轉外框

我們在印刷時，給予印刷廠檔案的文字都會外框筆畫，為的就是避免印刷廠沒有特定的字體，導致字體的顯示與預期並不同。

以下圖來說，「Sweetaste」有分為上方的外框字體，下方則是純文字。上方的輸出後會以 “路徑” 的方式來繪製，從圖中可以看到文字周圍都是點與線的結合；而下方的文字則是純文字，只有一條下底線表示而已。

外框字體的原始碼如下，都是由 path 標示路徑組成（下述程式碼參考即考）：

<path class="cls-2" d="M55.48,40.91H56A6.11,6.11,0,0,0,55.48,43c0,3.28,3.49,5,6.15,5,4.22,0,6.66-2.34,6.66-5.76a5.72,5.72,0,0,0-2.16-4.46l-2.55-2.34c-2.27-2-3.56-3.93-3.56-6.55,0-3.93,4.17-7,9.32-7,3.13,0,4.68,1.3,6.3,1.3a1.28,1.28,0,0,0,1.29-.94l.54.11L75,29.25h-.43a7.21,7.21,0,0,0,.32-2.13c0-3.31-3.2-4.71-5.54-4.71-3.17,0-5.51,1.76-5.51,4.42,0,2.24,1.3,3.64,2.74,4.94l3.2,2.88c1.73,1.54,3,3.09,3,5.79,0,4.07-4,8.06-10.9,8.06-4,0-5.15-1.47-7-1.47a1.43,1.43,0,0,0-1.37,1.15l-.51-.11Z"/><path class="cls-2" d="M90.54,48.22A3.24,3.24,0,0,0,91,46.56a4.9,4.9,0,0,0-.64-2l-.94-2c-.22-.47-.43-.94-.61-1.41-.69.65-1.4,1.23-2.09,1.77l-1.8,1.47c-1.11.94-1.73,1.48-2.45,2.2a10.23,10.23,0,0,0-1.58,1.91l-.43-.25a3.34,3.34,0,0,0,.43-1.66,4.76,4.76,0,0,0-.65-2l-.93-2a8.76,8.76,0,0,1-1-3.35c0-2.52,1.88-4.75,4.4-6.77l.72-.57.32.39a5.58,5.58,0,0,0-2.12,4.5c0,1.62,1,4,1.8,5.62a5.76,5.76,0,0,1,.68,2c3.49-2.84,4.75-4.79,4.75-7,0-1.47-.83-2.05-.83-3.49a1.86,1.86,0,0,1,2-1.8,1.92,1.92,0,0,1,1.83,1.12l.94-.8.72-.57.32.39a5.58,5.58,0,0,0-2.12,4.5c0,1.62,1,4,1.8,5.62a5.56,5.56,0,0,1,.68,2c3.5-2.84,4.54-4.79,4.54-7,0-1.47-.83-2.05-.83-3.49a1.86,1.86,0,0,1,2-1.8c1.62,0,2.19,1.44,2.19,2.81,0,3.27-2.88,6-5.32,8L95,44.36c-1.12.94-1.73,1.48-2.45,2.2A10.35,10.35,0,0,0,91,48.47Z"/><!-- 省略 -->

純文字的程式碼，僅有直接標示「Sweetaste」的文字，並透過 cls-1 來替換成特定字體，這個情況下如果用戶沒有該字體，那麼就僅會用系統字體顯示，所以請特別注意，盡可能外框所有字體。

<text class="cls-1" transform="translate(54.65 130)">Sweetaste</text>

注意輸出後的原始碼是否正確

先前不斷地說明使用工具的重要性，因為輸出原始碼時結果也會不同，如下原始碼是透過 Illustrator 所輸出，圖片是一個正方形，僅有透過 .cls-1 調整色彩。

<svg id="圖層_1" data-name="圖層 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 73 73">
  <defs>
    <style>
      .cls-1 {
        fill: #3f5d45;
      }
    </style>
  </defs>
  <title>tester</title>
  <rect class="cls-1" width="73" height="73" />
</svg>

接下來透過 Illustrator 加上陰影。

然後再重新輸出一次，會出現 data:image/png;base64.... 的 base64 原始碼，也就是說整個陰影都是透過 “點陣圖” 的方式來呈現，這會導致：

SVG 檔案大小會增加不少
尚失向量圖的特性（縮放、再編輯等）

SVG 檔案普遍來說都非常小，如果檔案有不正常的增大時（明顯比其他同類型檔案大數倍），那麼請透過文字編輯工具打開 SVG 檔案（注意 image 那行），確實了解檔案是否有問題。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 73 73">
  <defs>
    <style>
      .cls-1 {
        isolation: isolate;
      }

      .cls-2 {
        mix-blend-mode: darken;
      }

      .cls-3 {
        opacity: 0.75;
        mix-blend-mode: multiply;
      }

      .cls-4 {
        fill: #3f5d45;
      }
    </style>
  </defs>
  <title>tester</title>
  <g class="cls-1">
    <g id="圖層_1" data-name="圖層 1">
      <g class="cls-2">
        <image class="cls-3" width="103" height="103" transform="translate(-8 -8)" xlink:href="data:image/png;base64,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" />
        <rect class="cls-4" width="73" height="73" />
      </g>
    </g>
  </g>
</svg>

結語

先前就有聽過 svg 輸出時檔案居然要數 mb，仔細一問才發現是 Illustrator 輸出帶有了漸層、濾鏡等效果（目前版本漸層不會出錯，但濾鏡、陰影還是會有問題），如果 svg 輸出時發生這樣的問題時，會建議直接改用 png 不要使用有問題的 svg，因為已經失去 svg 原有的特色（檔案小、無縮放限制等）。